<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#eee;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/line.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            canvas.width = document.body.clientWidth;
            canvas.height = document.body.scrollHeight;

            var ball0 = new Ball(),
            ball1 = new Ball(20,"red");
            
            //球0
            ball0.mass = 2;                  //质量为2
            ball0.x = 50;
            ball0.y = canvas.height/2;
            ball0.vx = 1;
            
            //球1
            ball1.mass = 1;                    //质量为1
            ball1.x = 400;
            ball1.y = canvas.height/2;
            ball1.vx = -1;                    //速度为反向，大小为1
            
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                ball0.x += ball0.vx;
                ball1.x += ball1.vx;
                
                var dist = ball1.x - ball0.x;
                
            if(Math.abs(dist) < ball0.radius + ball1.radius){ //碰撞检测
                //计算碰撞后的速度
                var vx0Final = ((ball0.mass - ball1.mass)*ball0.vx + 2 * ball1.mass * ball1.vx)/(ball0.mass +ball1.mass);
                var vx1Final = ((ball1.mass - ball0.mass)*ball1.vx + 2 * ball0.mass * ball0.vx)/(ball0.mass +ball1.mass);
                
                //控制台打印
                console.log(vx0Final, vx1Final);
                
                //重新赋值
                ball0.vx = vx0Final;
                ball1.vx = vx1Final;
                
                ball0.x += ball0.vx;
                ball1.x += ball1.vx;
            }
                
                ball0.draw(context);
                ball1.draw(context);
            }())
        }
        

        // 能量守恒
//         E = 0.5 * m*v^2
        // 动量守恒
//         (0.5 * m1 * v1^2) + (0.5 * m2 * v2^2) = (0.5 * m1 * v1F^2) + (0.5 * m2 * v2F^2)

        //转换
//         公式1： m1 * v1 + m2 * v2 = m1 * v1F + m2 * v2F
//         公式2： (0.5 * m1 * v1^2) + (0.5 * m2 * v2^2) = (0.5 * m1 * v1F^2) + (0.5 * m2 * v2F^2)
        
//         碰撞后的速度为

//         v1F = ((m1 - m2)*v1 + 2*m2*v2) / (m1+m2)
//         v2F = ((m2 - m1)*v2 + 2*m1*v1) / (m1+m2)

    </script>
</body>
</html>
